<template>
 <div clas="Top-d">
    <footer-link></footer-link>
    <header1></header1>
    
  <div class="category main hasHeader">
    
      <div class="category-tab">
            <ul>
                <li v-for="(item,index) in list1"
                 :key="index"
                 class="ui-nowrap ui-border-b"
                  :class="{active:index==num}"
                  @click="see(index)">
                    <div class="cnt current">
                        <img :src="item.img">
                        <p class="ui-nowrap">{{item.name}}</p>
                    </div>
                </li>
            </ul>
          
      </div>
	
      <div class="category-content">

           <div class="category-content-wrapper">
               <div class="posR" v-show="type=='good'">
                    <ul class="ui-row ui-border-t">
                       <li class="Li"><img src="http://cdn.oudianyun.com/lyf/prod/ad-whale/1501489678957_195_UoirqbC4UT.jpg@base@tag=imgScale&h=800&w=800&q=90"/></li>
                       <li class="Li"><h1>热门商品</h1></li>
                        
                        <li class="ui-col ui-col-33" v-for="(items,index) in data.hot_product" :key="index">
                            <router-link :to="'/goodDetail/'">
                                <div class="Div">
                                    <img :src="items.imageUrl"/>
                                </div> 
                                <p>{{items.name}}</p>
                            </router-link>
                         </li>
                           
                         <li class="Li"><h1>常用商品</h1></li>
                         <li class="ui-col ui-col-33" v-for="(items,index) in data.common_product" :key="index">
                            <router-link :to="'/goodDetail/'">
                                <div class="Div">
                                    <img :src="items.imageUrl"/>
                                </div> 
                                <p>{{items.name}}</p>
                            </router-link>
                         </li>
                    </ul>
               </div>

                <div class="posR" v-if="type=='cate'">
                    <ul class="ui-row ui-border-t">
                         
                        <li class="title">
                            <h1 class="f12 c3 bold">{{showItem.categoryName}}</h1>
                             
                        </li>
                        <li class="ui-col ui-col-33" v-for="item in showItem.children">
                            <router-link :to="'/goods/'+item.categoryId">
                                <div class="Div">
                                    <img :src="item.pictureUrl"/>
                                </div> 
                                <p>{{item.categoryName}}</p>
                            </router-link>
                        </li>
                    </ul>
                </div>


           </div>

        <div>
          
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import Header1 from '../common/Header1'
import FooterLink from '../common/FooterLink'  
export default {
    components: {
        Header1,
        FooterLink,
    },
     
     data (){
         return {
             list1:[],
             data:[],   
             cate:[],
             num : 0,
             showItem: {}
         }
     },
     computed: {
        type(){
            if(this.num==0) {
                return 'good'
            }else{
                return 'cate'
            }
        } 
     },
     methods:{
         see(index){
            this.num=index;
         }
     },
     watch: {
         'num' :function(val) {
             this.showItem = this.cate[this.num-1]
         }
     },
     mounted() {
          
     },
     created(){
         fetch("../../static/data/fenlei/yizai.json").then(res=>{
            return res.json()
        }).then(res => {
            // console.log(res); 
            this.list1 = res.categories;
            this.data = res.data;
            this.cate = res.categorys;
        })
     }
}
</script>
<style scoped>
    *{
        margin:0;
        padding:0;
    }
    .active {
        color:#ff6900;
        border-left:.02rem solid #ff6900;
         
    }
    // 左边s
  .category{
        position:absolute;
        top:0;
        bottom:.49rem;
        width:100%;
        background-color:#f8f8f8;
    }
   .category .category-tab {
        float: left;
        width:25%;
        height: 100%;
        overflow:scroll;
    }
    .category .category-tab ul {
        width: 100%;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }  
    .category .category-tab ul li .cnt {
        position: relative;
        height: .4rem;
        font-weight: 700;
        padding: .08rem 0;
        border-bottom: .01rem #ddd solid;
    }
    .cnt img {
        width:.18rem;
        height:.18rem;
        border: 0;
        margin:0 auto;
    }
    .ui-nowrap {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .13rem;
        padding-top:.08rem;
    }

    // 右边
     
    .category-content{
        width:100%;
        margin-left:0.9rem;
        height: 100%;
        overflow-y: hidden;
        background:#fff;
        
    } 
   .category-content .category-content-wrapper{
        min-height:6.3rem;
        margin-bottom:0.5rem;
        height:100%;
        width:73%;
        padding-left:1rem;
        padding-top:.1rem;
        background:#f8f8f8;
        
   }
    .swipe img{
        width:2.7rem;
    }
    
    .posR{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
    }
    .posR .title h1{
        font-size:.1rem;
     }
    .posR .title h1{
         font-size:.14rem;
    }
    
    .ui-row{
        float:left;
         

         position:relative; 
    }
   .ui-row .ui-col{
        float:left;
        margin-top:.1rem;
         
    }
    .ui-row .ui-col{
        width:33%;
        
    }
    .ui-row .ui-col .Div{
        width:.83rem;
        height:.8rem;
        background:#fff;
        margin-right:.08rem;
      
    }
   .ui-row .ui-col .Div img{
       width:.64rem;
       height:.64rem;
       padding:.1rem;
   }
   .ui-row .ui-col p{
       width:.83rem;
       height:.3rem;
       overflow:hidden;
       white-space:nowrap;
       text-align:center;
       background:#fff;
       text-overflow:ellipsis;
   }
   .Li img{
     width:2.7rem;
      
   }
   .Li h1{
    font-size:.14rem;
    padding-top:.1rem;
   }
  
     
</style>
